<template>
    <div class="page-risk">
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper ">
                        <div class="swiper-slide">
                          <div class="page-item" >
                              <div class="p-top">
                                <div class="bule">
                                    1<span class="small_number">/9</span>
                                </div>
                                <div class="item item_bule">
                                  请问您的年龄处于哪个阶段？
                                </div>
                                <div class="item"  @touchstart="page(1,1,$event)" :class="{'active':number[0]==1}">
                                  18-30岁
                                </div>
                                <div class="item"  @touchstart="page(2,1,$event)" :class="{'active':number[0]==2}">
                                  31-50岁
                                </div>
                                <div class="item"  @touchstart="page(3,1,$event)" :class="{'active':number[0]==3}">
                                  51-60岁
                                </div>
                                <div class="item"  @touchstart="page(4,1,$event)" :class="{'active':number[0]==4}">
                                  60岁以上
                                </div>
                              </div>
                              <div class="p-bottom">
                                为积极拥抱监管，帮助您了解自身风险承受能力， 投资前请务必进行风险测评。
                              </div>
                          </div>
                        </div>


                      <div class="swiper-slide">
                           <div class="page-item">
                            <div class="p-top">
                              <div class="bule">
                                  2<span class="small_number">/9</span>
                              </div>
                              <div class="item item_bule">
                                您的家庭年收入为？
                              </div>
                              <div class="item" @touchstart="page(1,2,$event)" :class="{'active':number[1]==1}">
                                5万元以下
                              </div>
                              <div class="item" @touchstart="page(2,2,$event)" :class="{'active':number[1]==2}">
                              5-25万元
                              </div>
                              <div class="item" @touchstart="page(3,2,$event)" :class="{'active':number[1]==3}">
                              25-50万元
                              </div>
                                <div class="item" @touchstart="page(4,2,$event)" :class="{'active':number[1]==4}">
                                  50万元以上
                              </div>
                            </div>
                            <div class="p-bottom t-bule" @click="prepage()">
                              上一题
                            </div>
                        </div>
                      </div>

                        
                      <div class="swiper-slide">
                         <div class="page-item">
                        <div class="p-top">
                          <div class="bule">
                              3<span class="small_number">/9</span>
                          </div>
                          <div class="item item_bule">
                          在您的家庭总资产中，理财资金占比是多少？
                          </div>
                          <div class="item" @touchstart="page(1,3,$event)" :class="{'active':number[2]==1}">
                            10%以下
                          </div>
                          <div class="item" @touchstart="page(2,3,$event)" :class="{'active':number[2]==2}">
                          10%-25%
                          </div>
                          <div class="item" @touchstart="page(3,3,$event)" :class="{'active':number[2]==3}">
                          25%-40%
                          </div>
                            <div class="item" @touchstart="page(4,3,$event)" :class="{'active':number[2]==4}">
                          40%以上
                          </div>
                        </div>
                        <div class="p-bottom t-bule" @click="prepage()">
                          上一题
                        </div>
                    </div>
                      </div>     
                     
                      <div class="swiper-slide">
                          <div class="page-item" >
                            <div class="p-top">
                              <div class="bule">
                                  4<span class="small_number">/9</span>
                              </div>
                              <div class="item item_bule">
                                您曾经或现在进行过哪些类型投资？
                              </div>
                              <div class="item" @touchstart="page(1,4,$event)" :class="{'active':number[3]==1}">
                                除了银行储蓄外，几乎没有其他投资经验
                              </div>
                              <div class="item" @touchstart="page(2,4,$event)" :class="{'active':number[3]==2}">
                              购买过债券、保险等理财产品
                              </div>
                              <div class="item" @touchstart="page(3,4,$event)" :class="{'active':number[3]==3}">
                                购买过微贷、京东等p2p理财产品
                              </div>
                              <div class="item" @touchstart="page(4,4,$event)" :class="{'active':number[3]==4}">
                              参与过投资基金、信托、股票、外汇、期货、期权 等产品交易
                              </div>
                            </div>
                            <div class="p-bottom t-bule" @click="prepage()">
                            上一题
                            </div>
                        </div>
                      </div>
                    

                        <div class="swiper-slide">
                            <div class="page-item" >
                                <div class="p-top">
                                  <div class="bule">
                                      5<span class="small_number">/9</span>
                                  </div>
                                  <div class="item item_bule">
                                    您有多长时间的金融产品投资经验？
                                  </div>
                                  <div class="item" @touchstart="page(1,5,$event)" :class="{'active':number[4]==1}">
                                  没有经验
                                  </div>
                                  <div class="item" @touchstart="page(2,5,$event)" :class="{'active':number[4]==2}">
                                  1至3年
                                  </div>
                                  <div class="item" @touchstart="page(3,5,$event)" :class="{'active':number[4]==3}" >
                                  3至5年
                                  </div>
                                    <div class="item" @touchstart="page(4,5,$event)" :class="{'active':number[4]==4}">
                                  5年以上
                                  </div>
                                </div>
                                <div class="p-bottom t-bule" @click="prepage()">
                                  上一题
                                </div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                          <div class="page-item" >
                              <div class="p-top">
                                <div class="bule">
                                    6<span class="small_number">/9</span>
                                </div>
                                <div class="item item_bule">
                                  以下哪项描述最符合您的投资态度？
                                </div>
                                <div class="item" @touchstart="page(1,6,$event)" :class="{'active':number[5]==1}">
                                  厌恶风险，不希望本金损失，希望获得稳定回报
                                </div>
                                <div class="item" @touchstart="page(2,6,$event)" :class="{'active':number[5]==2}">
                                保守投资，不希望本金损失，愿意承担一定幅度的 收益波动
                                </div>
                                <div class="item" @touchstart="page(3,6,$event)" :class="{'active':number[5]==3}">
                                  寻求资金的较高收益和成长性，愿意为此承担有限 的本金损失
                                </div>
                                <div class="item" @touchstart="page(4,6,$event)" :class="{'active':number[5]==4}">
                                  希望赚取高回报，愿意为此承担较大的本金损失
                                </div>
                              </div>
                              <div class="p-bottom t-bule" @click="prepage()">
                              上一题
                              </div>
                          </div>
                        </div>

                    <div class="swiper-slide">
                      <div class="page-item" >
                          <div class="p-top">
                            <div class="bule">
                                7<span class="small_number">/9</span>
                            </div>
                            <div class="item item_bule">
                            您计划投资的期限是多久？
                            </div>
                            <div class="item" @touchstart="page(1,7,$event)" :class="{'active':number[6]==1}">
                            6个月以下
                            </div>
                            <div class="item" @touchstart="page(2,7,$event)" :class="{'active':number[6]==2}">
                              6个月至1年
                            </div>
                            <div class="item" @touchstart="page(3,7,$event)" :class="{'active':number[6]==3}">
                            1至3年
                            </div>
                            <div class="item" @touchstart="page(4,7,$event)" :class="{'active':number[6]==4}">
                            3年以上
                            </div>
                          </div>
                          <div class="p-bottom t-bule" @click="prepage()">
                            上一题
                          </div>
                      </div>                      
                    </div>



                     <div class="swiper-slide">
                          <div class="page-item" >
                              <div class="p-top">
                                <div class="bule">
                                    8<span class="small_number">/9</span>
                                </div>
                                <div class="item item_bule">
                                  本金和收益在投资上可接受哪种波动 幅度？
                                </div>
                                <div class="item" @touchstart="page(1,8,$event)" :class="{'active':number[7]==1}">
                                  在-5%与+5%之间
                                </div>
                                <div class="item" @touchstart="page(2,8,$event)" :class="{'active':number[7]==2}">
                                  在-10%与+10%之间
                                </div>
                                <div class="item" @touchstart="page(3,8,$event)" :class="{'active':number[7]==3}">
                                在-20%与+20%之间
                                </div>
                                <div class="item" @touchstart="page(4,8,$event)" :class="{'active':number[7]==4}">
                                波动超过-20%与+20%
                                </div>
                              </div>
                              <div class="p-bottom t-bule" @click="prepage()">
                                上一题
                              </div>
                          </div>
                       </div>

                        <div class="swiper-slide">
                                    <div class="page-item" >
                                    <div class="p-top">
                                      <div class="bule">
                                          9<span class="small_number">/9</span>
                                      </div>
                                      <div class="item item_bule">
                                      您愿意为收回损失等待多长时间？
                                      </div>
                                      <div class="item" @touchstart="page(1,9,$event)" :class="{'active':number[8]==1}">
                                      少于3个月
                                      </div>
                                      <div class="item" @touchstart="page(2,9,$event)" :class="{'active':number[8]==2}">
                                      3至6个月
                                      </div>
                                      <div class="item" @touchstart="page(3,9,$event)" :class="{'active':number[8]==3}">
                                      6至12个月
                                      </div>
                                      <div class="item" @touchstart="page(4,9,$event)" :class="{'active':number[8]==4}">
                                      12个月以上
                                      </div>
                                    </div>
                                    <div class="p-bottom t-bule" @click="prepage()">
                                      上一题
                                    </div>
                                </div>
                        </div>


                          <div class="swiper-slide">
                              <div class="page-item">
                                <div>
                                <div class="type-title">
                                    您的投资类型
                                </div>
                                <div class="investmentstype"> 
                                  {{investmentstype}}
                                </div>
                                <div class="investmentstype-des" v-show="investmentstype=='保守型'">
                                  您更倾向于收益相对稳定的投资，不期望以高风险换取高收益，波动幅度较大的投资会给您带来心理煎熬。
                                </div>
                                <div class="investmentstype-des" v-show="investmentstype=='稳健型'">
                                  您对“风险总是客观存在”有清楚的认识，并愿意面对一定的投资风险。在做投资决定时，您会对即将面临的风险认真仔细地进行分析。
                                </div>
                                <div class="investmentstype-des" v-show="investmentstype=='积极型'">
                                您追求高投资收益，更关注投资的长期增值，并愿意为此承受较大的风险。短期的投资波动不会对您的心理造成较大影响。
                                </div>
                                </div>
                                <div>
                                  <div class="jumpbtn" @click="jumpcenter()">我已了解</div>
                                  <div  class="rerisk" @click="rerisk()">重新测评</div>  
                                </div>
                              </div>
                            </div>

                    </div>
                </div>



    </div>
</template>

<script>
import "@/public/libs/swiper.css";
import Swiper from "@/public/libs/swiper.js";
import { Toast } from "mint-ui";
var page = 0;
var tabsSwiper;
window.backRiskAssessment = function() {
  if (page == 10) {
    return true;
  } else {
    return false;
  }
};

export default {
  data() {
    return {
      defaultpage: 1,
      number: [],
      numberstr: 0,
      investmentstype: "",
      riskGrade: 0,
      sessionid: "",
      isfirst: true,
      once:true,
    };
  },
  methods: {
    init() {
      if (this.numberstr !== 0) {
        this.$http
          .post(this.Interface.postRiskRating, {
            score: this.numberstr,
            sessionid: this.sessionid
          })
          .then(res => {
            if (res.data.success) {
              if (this.numberstr >= 9 && this.numberstr <= 13) {
                this.investmentstype = "保守型";
              } else if (this.numberstr >= 14 && this.numberstr <= 30) {
                this.investmentstype = "稳健型";
              } else {
                this.investmentstype = "积极型";
              }
            }else{
                Toast({
                    message: this.errmsg,
                    position: '服务器错误',
                    duration: 5000
                  });
            }
          });
      }
    },
    rerisk() {
      this.defaultpage = 1;
      this.number = [];
      page = 0;
      tabsSwiper.slideTo(0, 0, true);
    },
    page(score, type, event) {
      if(this.once){
        let demo = $(event.target);
              demo.addClass("active_click");
              demo.siblings().removeClass("active");
              demo.addClass("active");
              this.number[type - 1] = score;
              this.defaultpage++;
              page = this.defaultpage;
              tabsSwiper.slideTo(this.defaultpage - 1, 500, true);
              if (this.defaultpage == 10) {
                  this.numberstr = 0;
                  for (const iterator of this.number) {
                      this.numberstr += iterator;
                    }
                  this.init();
              
        }
      }
     
    },
    prepage() {
      this.defaultpage--;
      page = this.defaultpage;
      tabsSwiper.slideTo(this.defaultpage - 1, 500, true);
    },
    jumpcenter() {
      this.Uitis.JumpNavite("jumpToPersonCenter");
    }
  },
  mounted() {
    var _this=this;
    this.$nextTick(function() {
      //轮播功能
      var _this = this;
      tabsSwiper = new Swiper(".swiper-container", {
        centeredSlides: true,
        spaceBetween: 30,
        loop: false,
        initialSlide: 0,
        onSlideChangeStart:function(){
         _this.once=false;
        },
        onSlideChangeEnd: function() {
         _this.once=true;
          $(".item").removeClass("active_click");
        }
      });
    });
  },
  created() {
    this.Uitis.backRiskAssessment();
    this.Uitis.getInfo()
      .then(res => {
        if (res.uId !== "") {
          this.sessionid = res.sessionid;
          return this.$http.get(this.Interface.getRiskRating, {
            params: { sessionid: res.sessionid }
          });
        }
      })
      .then(res => {
        if (res.data.success) {
          this.riskGrade = res.data.data.riskRankId;
          if (this.riskGrade == 0) {
            this.defaultpage = 1;
            page = 1;
          } else if (this.riskGrade == 1) {
            this.defaultpage = 10;
            page = 10;
            tabsSwiper.slideTo(9, 0, true);
            this.investmentstype = "保守型";
          } else if (this.riskGrade == 2) {
            this.defaultpage = 10;
            page = 10;
            tabsSwiper.slideTo(9, 0, true);
            this.investmentstype = "稳健型";
          } else if (this.riskGrade == 3) {
            this.defaultpage = 10;
            page = 10;
            tabsSwiper.slideTo(9, 0, true);
            this.investmentstype = "积极型";
          }
        }
      });
  }
};
</script>

<style lang="less">
body {
  background: #fff;
}
.swiper-slide {
  height: 100%;
}
.swiper-container {
  height: 100%;
}
.page-risk {
  height: 100%;
  padding: 30px 50px 100px 50px;
  box-sizing: border-box;
  .page-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    .type-title {
      font-size: 27px;
      color: #666;
      margin-top: 50px;
    }
    .investmentstype {
      margin: 30px 0 70px 0;
      color: #5261f7;
      font-size: 55px;
    }
    .investmentstype-des {
      line-height: 45px;
      font-size: 27px;
      color: #666;
    }
    .jumpbtn {
      font-size: 30px;
      width: 520px;
      background: #5261f7;
      color: #fff;
      height: 70px;
      line-height: 70px;
      text-align: center;
      border-radius: 5px;
      margin: 0 auto;
    }
    .rerisk {
      text-align: center;
      margin: 50px 0px 80px 0px;
      color: #999;
      font-size: 26px;
    }
    .item {
      border-bottom: 1px solid #eee;
      font-size: 30px;
      color: #666;
      height: 160px;
      padding-left: 10px;
      display: flex;
      align-items: center;
      line-height: 45px;
    }
    .active {
      color: #5261f7;
    }
    .active_click {
      background: #f4f4f4;
    }
    .p-bottom {
      width: 550px;
      align-self: center;
      text-align: center;
      color: #999;
      font-size: 28px;
      line-height: 40px;
    }
    .t-bule {
      color: #5261f7;
    }
    .bule {
      font-size: 68px;
      color: #5261f7;
      .small_number {
        font-size: 42px;
        color: #e3e5fd;
      }
    }
    .item_bule {
      font-size: 38px;
      color: #5261f7;
    }
  }
}
</style>
